<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
  <!--<![endif]-->

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Scrollama demo</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      body {
        min-height: 101vh;
      }

      p {
        margin: 0;
      }

      #scroll {
        background-color: #cdcdcd;
        position: relative;
        margin-top: 105vh;
        margin-bottom: 200vh;
      }

      #scroll2 {
        background-color: #cdcdcd;
        position: relative;
        margin-top: 50vh;
        margin-bottom: 200vh;
      }

      .scroll__graphic {
        position: absolute;
        top: 0;
        left: 0;
        bottom: auto;
        background-color: #ccc;
        -moz-transition: background-color 250ms ease-in-out;
        -webkit-transition: background-color 250ms ease-in-out;
        transition: background-color 250ms ease-in-out;
        -webkit-transform: translate3d(0, 0, 0);
        -moz-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

      .scroll__graphic.is-fixed {
        position: fixed;
      }

      .scroll__graphic.is-bottom {
        bottom: 0;
        top: auto;
      }

      .scroll__text {
        padding: 1rem;
        position: relative;
      }

      .step {
        max-width: 30rem;
        margin: 3rem auto;
        border: 2px solid #333;
        background-color: #fff;
      }

      .step.is-active {
        background-color: lightgoldenrodyellow;
      }

      .step p {
        text-align: center;
        padding: 1rem;
      }
    </style>
  </head>

  <body>
    <section id="scroll">
      <div class="scroll__text">
        <div class="step" data-step="#ccc">
          <p>Step 1</p>
        </div>
        <!-- <div class='step' data-step='#aaa'>
				<p>Step 2</p>
			</div> -->
        <!-- <div class='step' data-step='#888'>
				<p>Step 3</p>
			</div>
			<div class='step' data-step='#666'>
				<p>Step 4</p>
			</div> -->
      </div>
    </section>
    <section id="scroll2">
      <div class="scroll__text">
        <div class="step" data-step="#ccc">
          <p>Step 1</p>
        </div>
        <!-- <div class='step' data-step='#aaa'>
				<p>Step 2</p>
			</div> -->
        <!-- <div class='step' data-step='#888'>
				<p>Step 3</p>
			</div>
			<div class='step' data-step='#666'>
				<p>Step 4</p>
			</div> -->
      </div>
    </section>
    <div class="debug"></div>
    <script src="d3.v4.min.js"></script>
    <script src="scrollama.js"></script>
    <script>
      var container = d3.select("#scroll");
      var text = container.select(".scroll__text");
      var step = text.selectAll(".step");

      var container2 = d3.select("#scroll2");
      var text2 = container2.select(".scroll__text");
      var step2 = text2.selectAll(".step");

      var scroller = scrollama();
      var scroller2 = scrollama();

      function handleResize() {
        // var h = Math.floor(window.innerHeight * 0.75) + 'px'
        step.each(function() {
          var ran = 0.1 + Math.random();
          var h = Math.floor(window.innerHeight * ran) + "px";
          d3.select(this).style("height", h);
        });

        scroller.resize();
      }

      function handleStepEnter(resp) {
        console.log("enter", resp);
        step.classed("is-active", function(d, i) {
          return i === resp.index;
        });
        var val = d3.select(resp.element).attr("data-step");
      }

      function handleStepExit(resp) {
        console.log("exit", resp);
        d3.select(resp.element).classed("is-active", false);
      }

      function handleProgress(resp) {
        console.log("progress", resp);
      }

      function handleResize2() {
        // var h = Math.floor(window.innerHeight * 0.75) + 'px'
        step2.each(function() {
          var ran = 0.1 + Math.random();
          var h = Math.floor(window.innerHeight * ran) + "px";
          d3.select(this).style("height", h);
        });

        scroller2.resize();
      }

      function handleStepEnter2(resp) {
        console.log("enter", resp);
        step2.classed("is-active", function(d, i) {
          return i === resp.index;
        });
        var val = d3.select(resp.element).attr("data-step");
      }

      function handleStepExit2(resp) {
        console.log("exit", resp);
        d3.select(resp.element).classed("is-active", false);
      }

      function handleProgress2(resp) {
        console.log("progress", resp);
      }

      function init() {
        handleResize();
        handleResize2();

        scroller
          .setup({
            step: "#scroll .step",
            offset: 0.33,
            debug: true,
            progress: true
          })
          .onStepEnter(handleStepEnter)
          .onStepExit(handleStepExit)
          .onStepProgress(handleProgress);

        scroller2
          .setup({
            step: "#scroll2 .step",
            offset: 0.67,
            debug: true,
            progress: true
          })
          .onStepEnter(handleStepEnter2)
          .onStepExit(handleStepExit2)
          .onStepProgress(handleProgress2);

        console.log(scroller.getOffset());
        console.log(scroller2.getOffset());
        // window.addEventListener('resize', handleResize)
      }

      init();
    </script>
  </body>
</html>
